package com.wake.mycomposebook.ui.home.list.my.horizontal

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.wake.data.DemoDataProvider
import com.wake.data.model.Item
import com.wake.data.model.Tweet
import com.wake.theme.modifier.components.Material3Card
import com.wake.theme.modifier.instagramGradient

/**
 *@author created by WA03675
 *@date  2022-04-14 17:02
 *@des
 */

@Composable
fun MyHorizontalList() {

    Column(modifier = Modifier.padding(10.dp)) {
        CardContent()
        MyHorLine()
        CircleContent()
    }
}


@Composable
fun CardContent() {
    val list = remember {
        DemoDataProvider.itemList
    }
    Column {
        MyHorTitle(msg = "Good Food")
        CardList(list)
    }

}

@Composable
fun CardList(list: List<Item>) {
    LazyRow(content = {
        items(
            list,
            itemContent = {
                CardItem(it)
            }
        )
    })
}

@Composable
fun CardItem(it: Item) {
    Material3Card(
        modifier = Modifier
            .padding(5.dp)
            .width(300.dp)
            .height(200.dp)
            .background(Color.Gray.copy(0.2f), RoundedCornerShape(5.dp)),
        shape = RoundedCornerShape(14.dp),
        elevation = 5.dp

    ) {
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = it.imageId),
            contentDescription = null,
            contentScale = ContentScale.Crop
        )
        Column(
            Modifier
                .padding(0.dp, 100.dp, 0.dp, 0.dp)
                .height(100.dp)
                .background(Color.White)
        ) {
            Text(text = it.title, style = MaterialTheme.typography.titleMedium)
            Text(text = it.subtitle, style = MaterialTheme.typography.titleSmall)
        }

    }
}


@Composable
fun CircleContent() {
    val list = remember {
        DemoDataProvider.tweetList
    }
    Column() {
        MyHorTitle(msg = "Stories")
        MyTweetList(list)
    }
}

@Composable
fun MyTweetList(list: List<Tweet>) {
    LazyRow(content = {
        items(
            list,
            itemContent = {
                MyTweetListItem(it)
            }
        )
    })


    Column(
        modifier = Modifier
            .width(80.dp)
            .height(80.dp)
    ) {

    }
}

@Composable
fun MyTweetListItem(tweet: Tweet) {
    val isSelect = remember {
        mutableStateOf<Boolean>(false)
    }
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        IconToggleButton(checked = isSelect.value, onCheckedChange = { isSelect.value = !isSelect.value }) {
            Surface(
                shape = CircleShape,
                modifier = Modifier
                    .height(40.dp)
                    .width(40.dp)
//                    .border(4.dp,if(isSelect.value) Color.Green else Color.Gray, CircleShape),
                    .border(4.dp, Brush.linearGradient(instagramGradient, start = Offset(x = 0f,y=0f), end = Offset(x=100f,y=100f)), CircleShape)
                ) {
                Image(
                    painter = painterResource(id = tweet.authorImageId),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    )
            }
        }
        Text(text = tweet.author, style = MaterialTheme.typography.bodyMedium)
    }
}


@Composable
fun MyHorTitle(msg: String) {
    Text(
        text = msg,
        style = MaterialTheme.typography.titleMedium,
        modifier = Modifier.padding(0.dp, 10.dp)
    )
}

@Composable
fun MyHorLine() {
    Divider(
        modifier = Modifier
            .fillMaxWidth()
            .height(1.dp)
            .background(color = Color.Gray.copy(0.2f))
    )
}

@Composable
@Preview
fun PreviewMyHorizontalList() {
    MyHorizontalList()
}

